<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="checkbox" id="selall">
    <ul id="list">
        <li>
            <input type="checkbox">
            <h2></h2>
            <img src="" alt="">
            <p>价格</p>
            <p>规格</p>
            <p>数量</p>
            <p>是否选中：</p>
        </li>
    </ul>


    <p id="totalnum">总数量：</p>
    <p id="totalprice">总价格：</p>

    <script>
        let products = [
            {
                goods_name: '小米10-1',
                goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                goods_price: '500',
                goods_attr: '砂石黑4GB+64GB',
                goods_num: 10,
                goods_is_checked: true
            },
            {
                goods_name: '小米10-2',
                goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                goods_price: '510',
                goods_attr: '砂石黑4GB+64GB',
                goods_num: 50,
                goods_is_checked: false
            }
        ]

        // 1.获取标签
        let selall = document.querySelector('#selall');
        let list = document.querySelector('#list');
        let totalnum = document.querySelector('#totalnum');
        let totalprice = document.querySelector('#totalprice')


        // 2.渲染页面
        function getData() {
            let str = '';
            products.forEach(function (item) {
                str += `<li> 
            <input type="checkbox" ${item.goods_is_checked ? 'checked' : ''}>
            <h2>${item.goods_name}</h2>
            <img src="${item.goods_img}" alt="">
            <p>价格:${item.goods_price}</p>
            <p>规格:${item.goods_attr}</p>
            <p>数量:${item.goods_num}</p>
            <p>是否选中：${item.goods_is_checked ? "选中" : "未选中"}</p>
        </li>`
            })
            list.innerHTML = str;

            // 给每个商品复选框添加change事件
            iptChange();
            // 计算总价格和总数量
            totals()

        }
        getData()


        // 3.全选按钮，遍历所有商品，将每个商品的复选框状态和全选状态一致,重新渲染页面
        selall.onchange = function(){
            products.forEach(function(item){
                item.goods_is_checked = selall.checked;
            })
            // 重新渲染
            getData()
        }

        // 4.每个商品前边的复选框添加onchange事件，
        // 改变对应商品的goods_is_checked值， 
        // 重新渲染页面， 
        // 判断全选的状态（循环遍历所有商品的goods_is_checked，如果都为true，全选就为true,否则就为false）

        function iptChange(){
            // 获取每个商品前边的复选框添加onchange事件，
            let ipt = list.querySelectorAll('input');
            ipt.forEach(function(item,index){
                item.onchange = function(){
                    // console.log(item.checked);
                    // 改变对应商品的goods_is_checked值，
                    products[index].goods_is_checked = item.checked;
                    // 重新渲染页面，
                    getData()
                    // 判断全选的状态
                    let s = products.every(function(item){
                        return item.goods_is_checked
                    })
                    console.log(s);
                    selall.checked = s;
                }
            })
        }


        // 5.计算总数量和总价格  循环遍历所有商品，判断如果商品的goods_is_checked为true,就让该商品参与计算

        function totals(){
            let snum = 0; //存放总数量
            let sprice = 0; // 存放总价格
            products.forEach(function(item){
                if(item.goods_is_checked){
                    snum += item.goods_num;
                    sprice += item.goods_num * item.goods_price
                }
            })

            // 渲染到页面
            totalnum.innerHTML = `总数量：${snum}`;
            totalprice.innerHTML = `总价格：${sprice}`
        }


    </script>
</body>

</html>